<template>
  <div>
    <el-select
      v-loadmore="loadMore"
      ref="select"
      v-bind="$attrs"
      v-on="$listeners"
      v-model="value"
      :value-key="keyValue"
      @clear="clear"
      @change="onChange"
      :placeholder="placeholder"
      clearable
    >
      <el-option
        v-for="d in list"
        :key="d[keyValue]"
        :label="d.title"
        :value="d.title"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择",
    },
    keyValue: {
      type: String,
      default: "title",
    },
    asyncFunction: {},
    isAsync: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      page: 1,
      size: 20,
      list: [],
      value: "",
      isLoading: false,
    };
  },
  created() {
    this.AsynchronousMethods();
  },
  directives: {
    loadmore: {
      bind(el, binding) {
        console.log("el:", el);
        console.log("binding:", binding.value);
        const selectDom = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        selectDom.addEventListener("scroll", () => {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          // console.log(
          //   "scrollHeight:",
          //   selectDom.scrollHeight,
          //   "scrollTop:",
          //   selectDom.scrollTop,
          //   "clientHeight:",
          //   selectDom.clientHeight
          // );
          const condition =
            selectDom.scrollHeight - selectDom.scrollTop <=
            selectDom.clientHeight;
          console.log(condition);
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  methods: {
    // 滚动下拉加载更多
    loadMore() {
      if (this.isLoading) {
        return false;
      }
      this.page += 1;
      this.AsynchronousMethods(20);
    },
    // 点击右边关闭图标事件
    clear() {
      this.$emit("onClear", this.value);
    },

    // 下拉框change选中事件
    onChange(rowKey) {
      let row = {};
      for (let i = 0, k = this.list.length; i < k; i++) {
        const elm = this.list[i];
        if (elm[this.keyValue] == rowKey) {
          row = elm;
        }
      }
      this.$emit("change", row);
    },

    // 接收请求得到的数据
    AsynchronousMethods() {
      if (!this.isAsync) {
        return Promise.resolve(this.asyncFunction);
      }
      this.isLoading = true;
      return Promise.resolve(this.asyncFunction(this.page, this.size))
        .then((res) => {
          let zhi = Array(6)
            .fill()
            .map((res,index) => ({
              title: index,
            }));
          this.isLoading = false;
          this.list = this.list.concat(zhi);
        })
        .catch((error) => {
          this.isLoading = false;
          this.list.length = 0;
          return "错误信息";
        });
    },
  },
};
</script>

<style scoped></style>
